<template>
<div class="register">
 <el-card class="box-card">
<div slot="header" class="clearfix">
    <span>华为商城注册</span>
</div>

<div>
<el-tabs v-model="currentIndex" stretch>
<el-tab-pane label="注册" name="register">
    <el-form :model="registerForm" :rules="rules" status-icon ref="registerForm">

        <el-form-item label="用户名" prop="username" label-width="70px">
            <el-input type="text" v-model="registerForm.username">
            </el-input>
        </el-form-item>

         <el-form-item label="密 码" label-width="70px" prop="password">
            <el-input type="password" v-model="registerForm.password">
            </el-input>
        </el-form-item>

        <el-form-item label="确认密码" label-width="70px" prop="checkpassword">
            <el-input type="checkpassword" v-model="registerForm.checkpassword">
            </el-input>
        </el-form-item>
        
        <el-form-item>
          <el-button label="primary" @click="submitForm('registerForm')">注册</el-button>
          <el-button label="primary" @click="home" class="zy">首页</el-button>
        </el-form-item>

       

    </el-form>
</el-tab-pane>
</el-tabs>
</div>

 </el-card>
</div>
</template>

<script>
    export default {
        data() {
            //验证规则
            var validateUserName = (rule,value,callback) =>{
            if(value===''){
                callback(new Error("请输入用户名"))
            }else{
                callback();
            }
            }

            var validatePassWord = (rule,value,callback)=>{
                 if(value===''){
                callback(new Error("请输入密码"))
            }else{
                callback();
            }
            }

            var validateCheckPassword = (rule,value,callback)=>{
            if(value===''){
                callback(new Error("请输入密码"))
            }else if(value !==this.registerForm.password){
                callback(new Error("两次输入密码不一致"))
            }
            else{
                callback();
            }
            }

            

            return {
                curentInde:"register",
                registerForm:{
                    username:"",
                    password:"",
                    checkpassword:""
                },
                rules:{
                    username:[
                        {
                            validator:validateUserName,trigger:"blur"
                        }
                    ],
                    password:[
                        {
                             validator:validatePassWord,trigger:"blur"
                        }
                    ],
                    checkpassword:[
                        {
                             validator:validateCheckPassword,trigger:"blur"                       
                        }
                    ]
                }
            }
        },
        methods: {
            submitForm(formName){
                this.$refs[formName].validate((valid)=>{
                    if(valid){
                        console.log(this.registerForm);
                    }
                    else{
                        return;
                    }
                })
            },
            home(){
                this.$router.push({name:"yemian"})
            }
        },
    }
</script>

<style lang="scss" scoped>
.register{
    width: 1200px;
    margin: 0 auto;
    margin-left: 550px;
    padding-top: 150px;
    text-align: center;
    .box-card{
        width: 500px;
        margin: 100 auto;
    }
}
.zy{
    margin-left: 330px;
}
</style>